<template>
	<view class="bgc">
		<view class="navigation" style="height: 44px;background-color: #fff;"></view>
		<view class="headerBg">
			<view class="nav-left" @tap="goToBack" style="padding-top: 40rpx;padding-left: 20rpx;">
				<up-icon name="arrow-left"  size="22"></up-icon>
			</view>
			<view class="header">
				<view class="headerLeft">
					<view class="headerName">
						{{customerInfo.name}}
					</view>
					<view class="headerSex" style="margin-left: 10rpx;">
						<image src="/static/imgs/myClue/man.png" mode="" style="width: 48rpx;height: 48rpx;" v-if="customerInfo.sex == '男'"></image>
						<image src="/static/imgs/myClue/woman.png" mode="" style="width: 48rpx;height: 48rpx;"  v-if="customerInfo.sex == '女'"></image>
					</view>
				</view>
				<view class="headerRight">
					<up-button class="custom-style" text="设置提醒" type="primary" :plain="true" :hairline="true" style="border-radius: 40rpx;width: 156rpx;height: 58rpx;margin-right: 20rpx;" @click="setReminder"></up-button>
					<up-button class="custom-style" text="修改信息" type="primary" :plain="true" :hairline="true"  style="border-radius: 40rpx;width: 156rpx;height: 58rpx;" @tap="changeCustomerInfo"></up-button>
				</view>
			</view>
		</view>
		
		<!-- 个人信息 -->
		<view class="performanceBox">
			<view class="content">
				<view class="contentOne">
					<view class="contentOneLeft">
						联系方式1：{{customerInfo.phoneFirst}}
					</view>
					<view class="contentOneRight">
						<up-tag text="A" plain size="mini" type="error" v-if="customerInfo.ranks=='A'"></up-tag>
						<up-tag text="B" plain size="mini" plainFill v-if="customerInfo.ranks=='B'"></up-tag>
						<up-tag text="C" plain size="mini" type="warning"v-if="customerInfo.ranks=='C'"></up-tag>
						<up-tag text="D" plain size="mini" type="info" v-if="customerInfo.ranks=='D'"></up-tag>
						
						<text style="margin-left: 24rpx;" :style="{'color':progressNameColor(customerInfo.progressName)}">{{customerInfo.progressName}}</text>
					</view>
				</view>
				<view class="contentOne">
					<view class="contentOneLeft">
						层次：{{customerInfo.level}}
					</view>
					<view class="contentOneRight">
						<up-tag :text="customerInfo.source" plain size="mini" type="success" plainFill></up-tag>
					</view>
				</view>
				<view class="contentOne">
					<view class="contentOneLeft">
						院校：{{customerInfo.college}}
					</view>
					<view class="contentOneRight">
						<!-- <up-tag :text="customerInfo.source" plain size="mini" type="success" plainFill></up-tag> -->
					</view>
				</view>
				<view class="contentTwo">
					<view class="contentTwoLeft">
						届次：{{customerInfo.classTime}}
					</view>
					<view class="contentTwoLeft">
						年级：{{customerInfo.grade}}
					</view>
				</view>
				<view class="contentThree">
					<view class="contentThreeLeft">
						选科/专业：{{customerInfo.major}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 时间 -->
		<view class="Times">
			<view class="TimesLeft">
				创建时间：{{customerInfo.createTime}}
			</view>
			<view class="TimesRight">
				最近操作时间：{{customerInfo.nearestTime}}
			</view>
		</view>
		
		<!-- 选项 -->
		<view class="tabs">
			<view class="tabsView">
				<view class="tabsViewRecords" @tap="showRecordsOrOrders = 'records'" :style="{'color':showRecordsOrOrders == 'records' ? 'rgb(64,149,229)':'','borderBottom':showRecordsOrOrders == 'records' ? '2px solid rgb(64,149,229)':''}">
					沟通记录
				</view>
				<view class="tabsViewOrders" @tap="showRecordsOrOrders = 'orders'" :style="{'color':showRecordsOrOrders == 'orders' ? 'rgb(64,149,229)':'','borderBottom':showRecordsOrOrders == 'orders' ? '2px solid rgb(64,149,229)':''}">
					客户订单
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<view class="bottomOne" v-if="showRecordsOrOrders == 'records'">
				<!-- 沟通记录 -->
				<view class="record">
					<view class="steps" v-for="(item,index) in communicationRecordsArray" :key="item.communicateId">
						<view class="stepsLeft">
							<view class="stepsLeftTop">
								{{communicationRecordsArray.length - index}}
							</view>
							<view class="stepsLeftBottom" v-if="index !== communicationRecordsArray.length-1">
								
							</view>
						</view>
						<view class="stepsRight">
							<view class="createTime">{{item.addPeople}} {{item.createTime}}</view>
							<view v-if="item.isRemind ==1" style="color:#409EFF;" >{{item.detail}}</view>
							<view v-else>{{item.detail}}</view>
						</view>
					</view>
					<view class="" v-if="communicationRecordsArray.length ==0">
						<view class="noData">
							<image src="/static/imgs/myClue/noData.png" mode="" style="max-height: 100%;max-width: 100%;"></image>
						</view>
					</view>
				</view>
				
				<!-- 添加沟通记录 -->
				<view class="addRecord">
					<up-input v-model="communicationRecords" placeholder="请输入内容" style="margin:0 20rpx;"></up-input>
					<text style="margin-right: 20rpx;">
						<up-button text="添加跟进记录" type="primary" :plain="true" :hairline="true" style="border-radius: 40rpx;" @tap="sendCommunicationRecordsBtnClick"></up-button>
					</text>
				</view>
			</view>
			<view class="bottomTwo" v-else>
				<view class="orderBtn" >
					<up-button type="primary" icon="plus" text="生成订单" @tap="generateOrderBtnClick"></up-button>
				</view>
				<view class="order">
					<view class="card"  v-for="item in orderArray" :key="item.orderId">
						<view class="cardTop">
							<view class="cardTopLeft">
								产品名称：{{item.productName}}
							</view>
							<view class="cardTopRight">
								￥{{item.amount}}
							</view>
						</view>
						<view class="cardCenterOne">
							<view class="cardCenterOneLeft">
								数量：{{item.quantity}}
							</view>
							<view class="cardCenterOneLeft" >
								是否退费：{{item.isReturns==1?'是':'否'}}
							</view>
						</view>
						<view class="cardCenterOne" v-if="item.isReturns==1">
							<view class="cardCenterOneLeft">
								退费金额：{{item.retAmount}}
							</view>
							<view class="cardCenterOneLeft">
								退还业绩：{{item.retAchievement}}
							</view>
						</view>
						<view class="cardCenterOne">
							成交时间：{{item.dealTime}}
						</view>
						<view class="cardBottom">
							订单号：{{item.orderNumber}}
						</view>
					</view>
				</view>
				<view class="" v-if="orderArray.length ==0">
					<view class="noData">
						<image src="/static/imgs/myClue/noData.png" mode="" style="max-height: 100%;max-width: 100%;"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 设置提醒 -->
		<view >
			<up-popup v-model:show="isShowModal" mode="center" :customStyle="{'width':'650rpx',}">
				<view style="padding: 20rpx;">
					<view style="margin-top: 20rpx;">
						<text style="color: red;">*</text>提醒日期
					</view>
					<view style="margin-top: 20rpx;">
						 <up-datetime-picker
						             hasInput
						             :show="false"
									 placeholder ="请选择提示时间"
						             v-model="single"
						             mode="datetime"
									 :min-date="nowDate"
						         ></up-datetime-picker>
					</view> 
					<view style="margin-top: 20rpx;">
						<text style="color: red;">*</text>备注
					</view>
					<view style="margin-top: 20rpx;">
						<up-textarea  placeholder="请输入内容" border="surround" v-model="notes"></up-textarea>
					</view> 
					<view style="margin-top: 20rpx;">
						<up-button type="primary" text="确定" @tap="setReminderDialogYesBtn"></up-button>
					</view> 
					<view style="margin-top: 20rpx;color: rgba(64,149,229,1);font-size: 24rpx;">
						系统会按照设置的日期推送跟进提醒。
					</view> 
				</view>
			</up-popup>
		</view>
		
		<!-- 生成订单 -->
		<view >
			<up-popup v-model:show="isShowOrder" mode="center" :customStyle="{'width':'650rpx',}">
				<view class="title" style="width: 100%;text-align: center;height: 100rpx;line-height: 100rpx;font-weight: bold;">
					生成订单
				</view>
				<view style="padding:0 20rpx 20rpx;">
					<view style="margin-top: 20rpx;">
						<text style="color: red;">*</text>产品名称
					</view>
					<view style="margin-top: 20rpx;">
						<up-input  placeholder="请选择产品" suffixIcon="arrow-right" :readonly="true" suffixIconStyle="color: #909399" @tap="showProduct = true" v-model="productInfo.name"></up-input>
					</view> 
					<view style="margin-top: 20rpx;">
						<text style="color: red;">*</text>数量
					</view>
					<view style="margin-top: 20rpx;">
						<up-input  placeholder="请输入数量" v-model="productInfo.num" @change="numChange"></up-input>
					</view> 
					<view style="margin-top: 20rpx;">
						<text style="color: red;">*</text>成交价格
					</view>
					<view style="margin-top: 20rpx;">
						 <up-input  placeholder="请输入成交价格" v-model="productInfo.price"></up-input>
					</view> 
					<view style="margin-top: 20rpx;">
						<text style="color: red;">*</text>成交日期
					</view>
					<view style="margin-top: 20rpx;">
						 <uni-datetime-picker type="date" :clear-icon="false"  v-model="productInfo.time" />
					</view> 
					<view style="margin-top: 20rpx;">
						<up-button type="primary" text="确定" @tap="generateOrder"></up-button>
					</view>
				</view>
			</up-popup>
		</view>
		
		<!-- 产品选择 -->
		<up-action-sheet :show="showProduct" :actions="showProductArray" title="请选择产品" 
			@close="showProduct = false" @select="productIdSelect" wrapMaxHeight="600rpx" >
		</up-action-sheet>
		
	</view>
</template>

<script setup>
	import { ref,reactive, onMounted,nextTick } from 'vue';
	import {cemCustomerInfoGetCommunicate,cemCustomerInfoInsetCommunicate,cemCustomerInfoInsertRemind} from '../../utils/myClue'
	import {cemBusinessOrderGetOneOrder,cemBusinessOrderInsertOrder} from '../../utils/order'
	import {getProductList} from '../../utils/product'
	import { onShow } from '@dcloudio/uni-app';
	
	// 显示沟通记录还是客户订单
	let showRecordsOrOrders = ref('records')
	
	
	// 设置提醒
	let isShowModal = ref(false)
	
	// 生成订单
	let isShowOrder = ref(false)
	
	// 根据流程进展返回字体颜色
	let progressNameColor = (val) => {
		if(val == '未沟通'){
			return 'rgb(255,115,115)'
		}else if(val == '一次进店' || val == '二次进店' || val == '多次进店' || val == '已通话' || val == '已加微信'){
			return 'rgb(254,135,53)'
		}else if(val == '服务中' ||val == '已成交' ||val == '完成服务'){
			return 'rgb(13,170,247)'
		}
	}
	
	// 返回
	let goToBack = ()=>{
		uni.redirectTo({
			url:'/pages/myCustomer/myCustomer'
		})
	}
	
	//想要发送的沟通记录
	let communicationRecords = ref('');
	  
	// 点击发送按钮
	let sendCommunicationRecordsBtnClick = () =>{
		if (communicationRecords.value.replace(/\s+/g, "") != ""){
			cemCustomerInfoInsetCommunicate({
				customerId: customerInfo.value.customerId,
				detail: communicationRecords.value,
			}).then(res=>{
				if(res.code == 200){
					uni.showToast({
						title: res.message,
						icon: 'success',
						duration: 2000
					})
					communicationRecords.value = '';
					setTimeout(()=>{
						getCommunicate()
					},1000)
				}
			})
		}
	}
	
	// 个人信息
	let customerInfo = ref()
	
	// 修改个人信息
	let changeCustomerInfo = ()=>{
		uni.redirectTo({
			url:'/pages/changeCustomerInfo/changeCustomerInfo'
		})
	}
	
	// 已经发送完的 最近沟通数组
	let communicationRecordsArray = ref([]);
	
	// 获取沟通记录
	let getCommunicate = () =>{
		cemCustomerInfoGetCommunicate({
			customerId:customerInfo.value.customerId
		}).then(res=>{
			if(res.code == 200){
				communicationRecordsArray.value = res.data
				nextTick(() => {
					let x = document.querySelectorAll(".u-steps-item__wrapper__circle")
					x.forEach((item, index) => {
						item.innerHTML = x.length - index
						item.style.fontSize ='20rpx'
					})
				})
			}
		})
	}
	
	// 订单数组
	let orderArray = ref([])
	
	// 获取订单详情
	let getCustomersOrder = ()=>{
		cemBusinessOrderGetOneOrder({
			customerId:customerInfo.value.customerId
		}).then(res=>{
			if(res.code == 200){
				orderArray.value = res.data
			}
		})
	}
	
	// 日期选择器
	let single = ref()
	let notes = ref()
	
	// 设置提醒
	let setReminder = ()=>{
		single.value = ''
		notes.value = ''
		isShowModal.value = true
	}
	
	let setReminderDialogYesBtn = ()=>{
		if(!single.value){
			uni.showToast({
				title:'请选择日期',
				icon:'error',
				duration:1000
			})
		}else if(!notes.value){
			uni.showToast({
				title:'请输入内容',
				icon:'error',
				duration:1000
			})
		}else{
			let date = new Date(single.value)
			const year = date.getFullYear();
			const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以要加1，并确保是两位数
			const day = ('0' + date.getDate()).slice(-2);
			const hours = ('0' + date.getHours()).slice(-2);
			const minutes = ('0' + date.getMinutes()).slice(-2);
			
			let remindTime = year +'-'+month +'-'+day
			let singleDate = year +'-'+month +'-'+day +' '+ hours +':'+ minutes+' '
			
			cemCustomerInfoInsertRemind({
				customerId: uni.getStorageSync('customerDetails').customerId,
				remarks: singleDate+'需联系客户，备注：'+ notes.value,
				remindTime: remindTime,
				userId: JSON.parse(uni.getStorageSync('userinfo')).userId
			}).then(res=>{
				if(res.code == 200){
					uni.showToast({
						title:res.message,
						icon:'success',
						duration:1000
					})
					isShowModal.value = false
					setTimeout(()=>{
						getCommunicate()
					},1000)
				}
			})
		}
	}
	
	// 产品信息
	let productInfo = reactive({
		name:'',
		num:null,
		price:null,
		time:''
	})
	
	// 选择产品
	let showProduct = ref(false)
	
	// 展示的产品列表
	let showProductArray = ref([])
	
	// 产品列表数组
	let productArray = ref([])
	
	let productIdSelect =(e)=> {
		productInfo.name = e.name;
		if(productInfo.num){
			productInfo.price = productArray.value.filter(item=>item.productName == productInfo.name)[0].busPrice * productInfo.num
		}
	}	
	
	let numChange = (val)=>{
		if(productInfo.name){
			productInfo.price = productArray.value.filter(item=>item.productName == productInfo.name)[0].busPrice * val
		}
	}
	
	// 生成订单按钮
	let generateOrderBtnClick = ()=>{
		productInfo.name = ''
		productInfo.num = null
		productInfo.price = null
		productInfo.time = ''
		isShowOrder.value = true
	}
	
	// 获取产品列表
	let getProductArray = ()=>{
		showProductArray.value.length = 0
		getProductList({
			businessId: uni.getStorageSync('businessId'),
			isSale: 1,
		}).then(res=>{
			if(res.code == 200){
				productArray.value = res.data
				for (let i = 0; i < productArray.value.length; i++) {
					showProductArray.value.push({
						name:productArray.value[i].productName
					})
				}
			}
		})
	}
	
	// 生成订单确认按钮
	let generateOrder = ()=>{
		if(!productInfo.name){
			uni.showToast({
				title:'请选择成交产品',
				icon:'error',
				duration:1000
			})
		}else if(!productInfo.num){
			uni.showToast({
				title:'请输入成交数量',
				icon:'error',
				duration:1000
			})
		}else if(!productInfo.price){
			uni.showToast({
				title:'请输入成交价格',
				icon:'error',
				duration:1000
			})
		}else if(!productInfo.time){
			uni.showToast({
				title:'请选择成交日期',
				icon:'error',
				duration:1000
			})
		}else{
			cemBusinessOrderInsertOrder({
				customerId: customerInfo.value.customerId,
				productId: productArray.value.filter(item => item.productName == productInfo.name)[0].busProId,
				quantity: productInfo.num,
				amount: productInfo.price,
				dealTime: productInfo.time,
			}).then(res=>{
				if(res.code == 200){
					uni.showToast({
						title:'成功',
						icon: 'success',
						duration: 2000
					})
					isShowOrder.value = false
					getCustomersOrder()
				}
			})
		}
	}
	
	// 当前年月日的时间戳
	let nowDate = ref()
	
	onShow(()=>{
		nowDate.value = new Date().getTime();
		customerInfo.value = uni.getStorageSync('customerDetails')
		getCommunicate()
		getCustomersOrder()
		getProductArray()
	})
	
</script>

<style lang="scss" scoped>
	.u-steps-item__wrapper__circle{
		font-size: 24rpx;
	}
	
	::v-deep .u-steps-item__content--column{
		margin-top: 0 !important;
	}
	
	// ============整个背景============ //
	.bgc{
		width: 100vw;
		height: 100vh;
		background-color: rgba(247,248,250,1);
	}
	
	// ============整个头部背景============ //
	.headerBg{
		width: 750rpx;
		height: 440rpx;
		border-bottom-left-radius: 66rpx;
		border-bottom-right-radius: 66rpx;
		background: linear-gradient(139.59deg, rgba(147,210,243,1) 22.85%,rgba(64,149,229,1) 61.57%);
		color: rgba(16,16,16,1);
		font-size: 28rpx;
		font-family: -regular;
		
	}
	
	.header{
		display: flex;
		justify-content: space-between;
		height: 150rpx;
	}
	
	.headerLeft{
		margin-left: 20rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}
	
	.headerName{
		// width: 168rpx;
		height: 68rpx;
		line-height: 68rpx;
		color: rgba(255,255,255,1);
		font-size: 56rpx;
	}
	
	.headerRight{
		margin-right: 20rpx;
		margin-top: 20rpx;
		// width: 40%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		
	}
	
	// ============信息 ============ //
	.performanceBox{
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		top: -200rpx;
		width: 700rpx;
		// height: 420rpx;
		line-height: 40rpx;
		border-radius: 20rpx;
		background-color: rgba(255,255,255,1);
		color: rgba(16,16,16,1);
		font-size: 14px;
		text-align: center;
		font-family: -regular;
		z-index:9;
		display:flex;
		// justify-content: space-around;
		align-items:center;
	}
	
	.content{
		// margin: 30rpx;
		width: 100%;
		height: 100%;
	}
	
	.contentOne{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 30rpx 0 30rpx;
	}
	
	.contentOneLeft{
		color: rgb(154,154,154);
		font-size: 28rpx;
	}
	
	.contentTwo{
		display: flex;
		justify-content: start;
		align-items: center;
		padding: 30rpx 30rpx 0 30rpx;
	}
	
	.contentTwoLeft{
		color: rgb(154,154,154);
		font-size: 28rpx;
		width: 50%;
		text-align: left;
	}
	
	.contentThree{
		padding: 30rpx;
	}
	
	.contentThreeLeft{
		color: rgb(154,154,154);
		font-size: 28rpx;
		width: 100%;
		text-align: left;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	// ============时间 ============ //
	
	.Times{
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		top: -200rpx;
		padding: 16rpx 36rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgb(154,154,154);
		font-size: 24rpx;
	}
	
	.TimesLeft{
		width: 40%;
		text-align: center;
	}
	
	.TimesRight{
		width: 60%;
		text-align: center;
	}
	
	// ============标签 ============ //
	.tabs{
		width: 750rpx;
		height: 90rpx;
		background-color: rgba(255,255,255,1);
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		top: -200rpx;
		text-align: center;
	}
	
	.tabsView{
		display: flex;
		justify-content: space-around;
		// width: 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		// color: rgb(64,149,229);
		// font-size: 30rpx;
		// position: relative;
		// left: 50%;
		// top: 50%;
		// transform: translate(-50%,-50%);
		// border-bottom: 2px solid rgb(64,149,229);
	}
	
	.tabsViewRecords{
		width: 120rpx;
		font-size: 30rpx;
	}
	
	.tabsViewOrders{
		width: 120rpx;
		font-size: 30rpx;
	}
	
	// ============记录内容 ============ //
	.bottom{
		position: relative;
		top: -170rpx;
	}
	
	.record{
		width: 100%;
		height: 530rpx;
		background-color: rgba(255,255,255,1);
		overflow: auto;
	}
	
	
	.steps{
		display: flex;
		justify-content: space-between;
		align-items: top;
		margin: 20rpx 0;
	}
	
	.stepsLeft{
		width: 10%;	
	}
	
	.stepsLeftTop{
		height: 36rpx;
		width: 36rpx;
		line-height: 36rpx;
		border-radius: 50%;
		text-align: center;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		border: 2rpx solid #409EFF;
		font-size: 28rpx;
		z-index: 999;
		color: #409EFF;
	}
	
	.stepsLeftBottom{
		height: calc(100% - 20rpx);
		width: 4rpx;
		background-color: #ccc;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.stepsRight{
		width: 88%;
	}
	
	.createTime{
		color: rgb(154,154,154);
		font-size: 30rpx;
		height: 40rpx;
		line-height: 40rpx;
	}
	
	.noData{
		width: 444rpx;
		height: 444rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	
	// ============订单 ============ //
	.orderBtn{
		height: 86rpx;
		line-height: 86rpx;
		background-color: white;
	}
	
	.order{
		height: 570rpx;
		width:100%;
		overflow: auto;
		background-color: rgba(247,248,250,1);
	}
	
	.card{
		padding:15rpx;
		margin: 15rpx;
		background-color: white;
	}
	
	.cardTop{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
		font-weight: bold;
	}
	
	.cardTopLeft{
		height: 36rpx;
		line-height: 36rpx;
		font-size: 28rpx;
	}
	
	.cardTopRight{
		height: 36rpx;
		line-height: 36rpx;
		color: rgba(233,157,66,1);
		font-size: 28rpx;
	}
	
	.cardCenterOne{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
		font-size: 28rpx;
		color: rgba(108,108,108,1);
	}
	
	.cardCenterOneLeft{
		width: 50%;
	}
	
	.cardBottom{
		font-size: 28rpx;
		color: rgba(108,108,108,1);
	}
	
	// ============添加记录 ============ //
	.addRecord{
		margin-top: 20rpx;
		height: 92rpx;
		background-color: white;
		display: flex;
		align-items: center;
	}
</style>
